<!DOCTYPE html PUBLIC "-//W3C//DTD Xhtml 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<title></title>
	
	<script>
		var xmlHttp;
		window.onload=function(){
			// 1. 브라우저에 따른 XMLHttpRequest생성하기.
			xmlHttp = createXMLHTTPObject();
			
			// 2. 요청에 대한 응답처리 이벤트 리스너 등록.
			xmlHttp.onreadystatechange=on_ReadyStateChange;
			
			// 3. 서버로 보낼 데이터 생성.
			var data	= "key1=value1&key2=value2";
			 			
			// 4. 클라이언트  <-> 서버간의 연결 요청 준비(open()메소드이용)
			// 4-1. 서버로 보낼 데이터 전송 방식 설정(GET, POST중 선택)
			// 4-2. 서버 응답 방식 설정(동기, 비동기 중 선택) 
					
			// 5. 실제 데이터 전송(send()).
			
			// T. 동기/비동기 실행 테스트를 위한 부분.
			alert("전송 시작!");
		}
		
		// 1. 브라우저에 따른 XMLHttpRequest생성하기.
		function createXMLHTTPObject(){
			var		xhr		= null;
			if (window.XMLHttpRequest) {
				// IE7버전 이상, 크롬, 사파리, 크롬, 오페라등 거의 대부분의 브라우저에서는
				// XMLHttpRequest객체를 제공합니다.
				xhr = new XMLHttpRequest();
			}
			else {
				// IE6, IE5 버전에서는 아래와 같이 XMLHttpRequest객체를 생성해야 합니다.
				xhr = new ActiveXObject("Microsoft.XMLHTTP");
			}
				
			return xhr;
		}
		
		// 6. 응답처리.
		function on_ReadyStateChange(){
			// 4=데이터 전송 완료.(0=초기화전, 1=로딩중, 2=로딩됨, 3=대화상태)
			if(xmlHttp.readyState==4){
				//200은 에러 없음.(404=페이지가 존재하지 않음)
				if(xmlHttp.status==200){
					//7.  이제 이부분에서 서버에서 보내오는 데이터 타입(XML, JSON, CSV)에 
					// 따라 사용하면 된답니다.
					
				}
				else{
					alert("처리 중 에러가 발생했습니다.");
				}
			}
		}
	</script>
	
</head>

<body>
</body>
</html>


